<template>
  <view class="feedback">
    <intake-nav-bar title="故障报修" dark :fixed="true" />
    <view class="_feedback">
      <view class="input-area">
        <view class="label">请在此描述您遇到的问题:</view>
        <textarea class="textarea" v-model="feedbackContent" placeholder="请在此处输入" placeholder-style="color: #999999;" />
      </view>
      <view class="form-item">
        <text class="form-label">故障图片</text>
        <view class="upload-area">
          <view  class="upload-placeholder" @click="chooseImage">
            <uni-icons type="plusempty" size="32" color="#CCCCCC" />
          </view>
          <image v-for="(path, index) in imagePaths" :key="index" :src="path"></image>
        </view>
      </view>
    </view>
    <view class="submit-area">
      <button class="submit-btn" type="primary" @click="handleSubmit">提交</button>
    </view>

  </view>
</template>

<script>
import { basicFileSignConfig ,saveReair } from "@/api/public";

export default {
  data() {
    return {
      feedbackContent: "",
      phoneNumber: "",
      imageUrl: "",
      oss_list: "",
      imagePaths: []
    };
  },

  async onLoad(query) {
    this.getFileSign()
  },
  methods: {
    getFileSign() {
      basicFileSignConfig({ dir: "device" }).then(res => {
        console.log("res", res.data)
        this.oss_list = res.data;
      })
    },
    chooseImage() {
      let that = this
      let url = that.oss_list.host;
      if (this.imagePaths.length >8) {
        uni.showToast({
          title: '最多只允许上传九张',
          icon: 'none'
        });
      } else {
        let  suffix = '.png'// 文件后缀
        let filename = new Date().getTime() + Math.floor(Math.random() * 150) + suffix
        const fileKey = that.oss_list.dir + filename
        uni.chooseImage({
          count: 1,
          success: (res) => {
            console.log('===========',res)
            this.imageUrl = res.tempFilePaths[0];
            uni.uploadFile({
              url, //仅为示例，非真实的接口地址
              filePath: this.imageUrl,
              formData: {
                'key': fileKey,
                'policy': that.oss_list.policy,
                'OSSAccessKeyId': that.oss_list.accessid,
                'signature': that.oss_list.signature,
                'success_action_status': '200',
              },
              name: 'file',
              success: (uploadFileRes) => {
                if (uploadFileRes.statusCode == 200) {
                  let file_path = that.oss_list.cdn_host +'/'+ fileKey;
                  this.imagePaths.push(file_path)
                } else {
                  uni.showToast({
                    icon: 'none',
                    title: '视频格式不支持',
                  })
                  return false
                }

              }
            })
          }
        });
      }
    },
    handleSubmit() {
      if (!this.feedbackContent.trim()) {
        uni.showToast({
          title: '请输入您遇到的问题',
          icon: 'none'
        });
        return;
      }
      // 提交逻辑
      saveReair({ content: this.feedbackContent, path_file: this.imagePaths }).then(res => {
        this.feedbackContent = '';
        if (res.status === 0) {
          uni.showToast({
            title: '提交成功',
            icon: 'none'
          });
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/index/home'
            });
          }, 2000);
        }
      })
    }
  }
}
</script>

<style lang="scss">
.feedback {
  background: url($baseUrl + '/images/bg/user_bg@2x.png') no-repeat center / 100% 100%;
  width: 100%;
  height: 100vh;
  /* 使用视口高度，确保元素高度充满整个屏幕 */
  //display: flex;
  justify-content: center;
  background-size: cover;
  /* 使背景图片覆盖整个元素 */
  padding: 0 30rpx;

  ._feedback {
    flex: 1;

    .input-area,
    .phone-area {
      background-color: #ffffff;
      border-radius: 8px;
      padding: 30rpx;
      margin-bottom: 30rpx;

      .label {
        font-size: 14px;
        color: #333333;
        margin-bottom: 20rpx;
      }

      .textarea {
        width: 100%;
        height: 280rpx;
        font-size: 14px;
        line-height: 1.5;
        color: #333333;
      }
    }

    .form-item {
      margin-bottom: 32rpx;
      background-color: #FFFFFF;
      border-radius: 12rpx;
      padding: 24rpx;

      .form-label {
        font-size: 14px;
        color: #333333;
        margin-bottom: 16rpx;
        display: block;
      }

      .upload-area {
        width: 100%;
        min-height: 400rpx;
        border-radius: 8rpx;
        // display: table-footer-group;
        align-items: center;
        justify-content: center;

        .upload-placeholder {
          float: left;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 145rpx;
          height: 145rpx;
          border: solid 1px #f2f2f2;
          margin-right: 15rpx;
          margin-top: 10rpx;
        }

        image {
          float: left;
          width: 145rpx;
          height: 145rpx;
          margin: 10rpx;
          border: solid 1px #f2f2f2;
        }

        image:nth-child(5),
        image:nth-child(9) {
          margin-left: 0rpx;
        }

        .preview-image {
          width: 100%;
          height: 100%;
          border-radius: 8rpx;
        }
      }
    }

  }
}
</style>
